<template>
	<view class="classify">
		<view @click='goClassify(index)' class="card" v-for='(item, index) in cardData' :key='index'>
			<image class='img' :src="item.img"></image>
			<p>{{ item.text }}</p>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				cardData: [
					{img: 'https://img0.baidu.com/it/u=3460228697,3696403685&fm=26&fmt=auto&gp=0.jpg', text: '生鲜'},
					{img: 'https://img0.baidu.com/it/u=2615852147,2319109430&fm=26&fmt=auto&gp=0.jpg', text: '饮品'},
					{img: 'https://img1.baidu.com/it/u=973612408,4054142809&fm=26&fmt=auto&gp=0.jpg', text: '速食'},
					{img: 'https://img2.baidu.com/it/u=1806672165,1299032726&fm=26&fmt=auto&gp=0.jpg', text: '学习'},
					{img: 'https://img2.baidu.com/it/u=2956942018,693994651&fm=26&fmt=auto&gp=0.jpg', text: '零食'},
					{img: 'https://img2.baidu.com/it/u=3254312912,4092174469&fm=26&fmt=auto&gp=0.jpg', text: '生活'},
					{img: 'https://img0.baidu.com/it/u=3139513768,19770563&fm=26&fmt=auto&gp=0.jpg', text: '干货'},
					{img: 'https://img1.baidu.com/it/u=204436144,480687033&fm=26&fmt=auto&gp=0.jpg', text: '茶类'}
				]
			}
		},
		methods:{
			goClassify(index){
				uni.navigateTo({
					url:'/pages/tab2/classify?id=' + index
				})
			}
		}
	}
</script>

<style lang='scss'>
.classify{
	width: 100%;
	height: 440rpx;
	background-image: linear-gradient(to right bottom,#FFFFFF,#F0F8FF);
	.card{
		width: 25%;
		float: left;
		text-align: center;
		margin-top: 60rpx;
		.img{
			width: 110rpx;
			height: 110rpx;
			border-radius: 50%;
		}
		p{
			font-size: 28rpx;
			color: #808080;
		}
	}
}
</style>
